<template>
	<view class="page-container">
		<view class="head">
			欢迎来到车联网服务平台商家端
		</view>

		<view class="img">
			<image src="/static/images/组 6(1).png" mode=""></image>
		</view>
		<view class="headText">

			<view class="context">
				<uni-forms border>
					<view class="input-border" style="color: red;">
						<uni-easyinput :inputBorder="false" v-model="login.tel" placeholder="手机号登录"></uni-easyinput>
					</view>
					<view class="input-border" style="display: flex; justify-content: center;">
						<uni-easyinput style=" width: 300rpx;" v-model="login.code" :inputBorder="false"
							placeholder="输入验证码"></uni-easyinput>
						<button type="primary" @click="getCode()" :disabled="countdown > 0"
							style="display: inline-block; height: 60rpx; line-height: 60rpx; border-radius: 30rpx;">
							<!-- 根据倒计时状态显示不同文本 -->
							{{ countdown > 0 ? `${countdown}秒后重新获取` : '获取验证码' }}
						</button>
					</view>
				</uni-forms>
			</view>
			<view class="reg">
				<text @click="toRegistry()">立即注册></text>
				<button @click="toLogin()" type="primary" style="margin-top: 50rpx;border-radius: 100rpx;">登录</button>
			</view>


		</view>
	</view>
</template>

<script>
	import {
		get,
		post
	} from '@/utils/request.js';
	export default {
		data() {
			return {
				login: {
					tel: '', // 手机号
					code: '', // 验证码
				},
				countdown: 0, // 倒计时秒数，0表示未处于倒计时状态
			}
		},
		methods: {
			getCode() {

				// 首先判断手机号是否正确
				var isTel = this.validatePhone(this.login.tel)

				if (!isTel.valid) {
					uni.showToast({
						title: isTel.message,
						icon: 'error',
						duration: 1500
					});
					
				} else {
					this.countdown = 60;
					const timer = setInterval(() => {
						this.countdown--;
						// 倒计时结束，清除定时器
						if (this.countdown <= 0) {
							clearInterval(timer);
						}
					}, 1000);
					get("/auth/code1",{"username":this.login.tel}).then(resp=>{
						console.log(resp);
						if(resp.code===200){
							uni.showToast({
								title:resp.data+" "+resp.msg,
								icon:'success',
								duration:5000
							})
						}else{
							uni.showToast({
								title:resp.msg,
								icon:'error',
								duration:3000
							})
							clearInterval(timer);
						}
						
					}).catch(error=>{
						console.log(error);
						uni.showToast({
							title:error.msg,
							icon:'error',
							duration:3000
						})
					})
					
					
					
					// 开始倒计时（60秒）
					

				}
				console.log(isTel);
				console.log("点击了获取验证码");
			},
			toLogin() {
				if(this.login.code==''||this.login.tel==''||this.login.tel.length!=11){
					uni.showToast({
						title:"手机号/验证码不完整",
						icon:'error',
						duration:3000
					})
					return;
				}
				console.log("点击了登录。。。");
				console.log(this.login.tel, this.login.code);
				post("/auth/login1", {
					"username": this.login.tel,
					"code":this.login.code
				}).then(response => {
					// 当请求成功时，会执行这里的代码
					console.log("后端返回的数据：", response);
					
					if(response.code===200){
						console.log('token',response.data.access_token);
						uni.setStorageSync('token',response.data.access_token)
						uni.showToast({
							title:"登录成功",
							icon:'success',
							duration:1000
						})
						uni.reLaunch({
							url:'/pages/index/index'
						})
					}else{
						uni.showToast({
							title:response.msg,
							icon:'error',
							duration:1000
						})
					}
					
					// 可以在这里处理数据，比如存储token、跳转页面等
				}).catch(error => {
					// 当请求失败时，会执行这里的代码
					console.log("请求出错：", error);
				});



			},
			toRegistry() {
				uni.navigateTo({
					url: '/pages/log-reg/register/register'
				})
			},

			// 验证手机号
			validatePhone(phone) {
				// 去除空格
				const phoneNum = phone.replace(/\s+/g, '');

				// 1. 检查是否为空
				if (!phoneNum) {
					return {
						valid: false,
						message: '请输入手机号码'
					};
				}

				// 2. 检查长度是否为11位
				if (phoneNum.length !== 11) {
					return {
						valid: false,
						message: '请输入11位手机号码'
					};
				}

				// 3. 正则表达式校验（支持常见号段）
				// 中国移动：134(0-8)、135、136、137、138、139、147、150、151、152、157、158、159、178、182、183、184、187、188
				// 中国联通：130、131、132、145、155、156、166、171、175、176、185、186
				// 中国电信：133、153、173、177、180、181、189、199
				const reg = /^1[3-9]\d{9}$/;
				if (!reg.test(phoneNum)) {
					return {
						valid: false,
						message: '请输入正确的手机号码'
					};
				}

				return {
					valid: true,
					message: '验证通过'
				};
			},
		}
	}
</script>

<style scoped>
	.page-container {
		width: 100vw;
		height: 100vh;
		/* 高度等于屏幕高度，刚好铺满屏幕 */
		overflow: hidden;
		/* 隐藏超出容器的内容，禁止滚动 */
		position: relative;
		/* 确保内部绝对定位元素正常显示 */
	}

	.head {
		width: 100vw;
		height: 200rpx;
		background-image: url('/static/images/组 6.png');
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-position: center top;
		color: #fff;
		text-align: center;
		font-size: 40rpx;
		padding: 80rpx 0rpx;
		/* 设置基础层级 */
		z-index: 1;
		position: relative;
	}

	.img {
		/* 移除调试用的边框 */
		/* border: 1rpx solid black; */
		display: flex;
		justify-content: center;
		margin-top: -174rpx;
		/* 关键：设置更高的层级让图片在最上面 */
		z-index: 3;
		/* z-index需要配合position使用 */
		position: relative;
	}

	.img>image {
		width: 300rpx;
		height: 200rpx;
	}

	.headText {
		margin-top: -60rpx;
		background-color: #fff;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		width: 750rpx;
		height: 100vh;
		position: relative;
		/* 表单区域层级低于图片 */
		z-index: 2;
	}


	.context {
		padding: 100rpx 0rpx 20rpx 0rpx;
	}

	.input-border {
		width: 590rpx;
		margin-left: 80rpx;
		border-bottom: 1rpx solid #d0d0d1;
		margin-top: 50rpx;
	}

	.reg {
		color: dodgerblue;
		width: 590rpx;
		margin-left: 80rpx;
	}
</style>